<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 文本对齐要加给block或者inline-block，注意不能加给inline元素这样是没有效果的 */
        
        body {
            height: 2000px;
        }
        
        .p1 {
            border: 1px solid red;
            text-align: right;
        }
        
        .s1 {
            text-align: right;
            border: 1px solid red;
        }
        
        .b1 {
            width: 500px;
            border: 1px solid black;
            text-align: right;
            display: inline-block;
        }
        
        p {
            text-indent: 2em;
        }
        
        .p2 {
            text-decoration: underline;
        }
        
        .p3 {
            text-decoration: overline;
        }
        
        .p4 {
            text-decoration: line-through;
        }
        
        .p5 {
            text-transform: none;
            /* 单词之间的间距 */
            word-spacing: 0.5em;
        }
        
        input,
        textarea {
            text-transform: capitalize;
        }
        
        .p6 {
            text-shadow: 1px 1px 2px #948b8b;
        }
        
        .p7 {
            letter-spacing: 5px;
        }
    </style>
</head>

<body>
    <p class="p1">一段文本</p>
    <span class="s1">另一端文字</span>
    <div class="b1">
        <span class="s1">另一端文字</span>
    </div>

    <h2></h2>
    <p class="p2">
        永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
    </p>
    <p class="p3">
        是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。
    </p>
    <p class="p4">
        夫人之相与，俯仰一世。或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期于尽！古人云：“死生亦大矣。”岂不痛哉
    </p>
    <del>删除内容</del>
    <p class="p5">
        Hello world. hello html ,helllo css <br> 永和九年
    </p>
    <input type="text"><br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <p class="p6">设置文字阴影</p>
    <p class="p7">
        How are you today; <br> 今天怎么是你
    </p>
</body>

</html>